<template> 
	<div class="list" ref="wrapper">
    <div>
      <div class="header">您的位置</div>
      <div class="button-list">
        <div class="button selected">{{this.currentCity}}</div>

      </div>
      <div class="header">热门城市</div>
      <div class="button-list">
        <div 
        class="button" 
        v-for="(item,index) of hotCities" 
        :key="item.id"
        @click="handleCityClick(item.name)"
        >{{item.name}}</div>
      </div>
      <div 
      v-for="(item,key) of cities" 
      :key="key"
      :ref="key"
      >
      <div class="header">{{key}}</div>
      <ul class="address-list">
        <li 
          v-for="(innerItem,index) of item" 
          :key="innerItem.id"
          @click="handleCityClick(innerItem.name)"
        >{{innerItem.name}}</li>

      </ul>
    </div>
  </div>
</div>
</template> 

<script> 
  import Bscroll from 'better-scroll'
  import { mapState,mapMutations } from 'vuex'
  export default {
    data () { 
      return { 

      }; 
    }, 
    props:{
      cities:Object,
      hotCities:Array,
      letter:String
    },
    computed:{
      ...mapState({
        currentCity:'city'
      })
    },
    mounted(){
      this.scroll=new Bscroll(this.$refs.wrapper)
    },
    methods: { 
      handleCityClick(city){
        this.changeCity(city)
        this.$router.push("/")
      },
      ...mapMutations(['changeCity'])
    },
    watch:{
      letter(){
        if(this.letter){
          const element=this.$refs[this.letter][0];
          this.scroll.scrollToElement(element)
        }
      }
    }


  }; 
</script> 

<style scoped> 
.list{
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 90px;
  bottom: 0;
  right: 0;
}
.header{
  border-bottom: 1px solid #ccc;
  padding: 5px;
}
.button-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-left;

}
.button{
  border:1px solid #ccc;
  width: 70px;
  height: 25px;
  margin: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.selected{
  border:1px solid #00bcd4;
  color: #00bcd4;
}
.address-list li{
  margin: 10px;
  color: #666;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

</style> 